<script setup>
import { onMounted, ref, reactive, h, inject, shallowRef } from "vue"
import zhCN from "ant-design-vue/es/locale/zh_CN"
import dayjs from "dayjs"
import "dayjs/locale/zh-cn"
import mapToken from "@/token.js"

// import { Sortable } from "sortablejs-vue3"
import Sortable from "sortablejs"

import Search from "@/page/search/index.vue"
import Tool from "@/page/tool/index.vue"
import dobase64 from "@/page/tool/parse/doBase64.vue"
import domd5 from "@/page/tool/parse/doMd5.vue"
import dotimestamp from "@/page/tool/parse/doTimestamp.vue"
import dourl from "@/page/tool/parse/doUrl.vue"
import doaes from "./page/tool/parse/doAes.vue"
import jsonc from "@/page/tool/compare/easy_json.vue"
import txtc from "@/page/tool/compare/easy_txt.vue"
import api_item from "@/page/apimanagement/item.vue"
import api_info from "@/page/apimanagement/api_info.vue"

dayjs.locale("zh-cn")
const globalVars = inject("globalVars")
globalVars.addPane("Search", "首页", false)
globalVars.addPane("Tool", "工具", false)
globalVars.addPane("api_item", "接口管理", false)

const state = reactive({
    component_map: {
        Search: shallowRef(Search),
        Tool: shallowRef(Tool),
        dobase64: shallowRef(dobase64),
        domd5: shallowRef(domd5),
        dotimestamp: shallowRef(dotimestamp),
        dourl: shallowRef(dourl),
        jsonc: shallowRef(jsonc),
        txtc: shallowRef(txtc),
        api_item: shallowRef(api_item),
        api_info: shallowRef(api_info),
        doaes: shallowRef(doaes),
    },
})
onMounted(() => {
    const el = document.querySelector(".alltabs .ant-tabs-nav-wrap .ant-tabs-nav-list")
    //移除最后一个元素
    try {
        el.removeChild(el.lastChild)
    } catch (error) {}
    Sortable.create(el, {
        animation: 150,
        delay: 0,
        touchStartThreshold: 0,
        direction: "horizontal",
        draggable: ".ant-tabs-tab-with-remove",
        sort: true,
        handle: ".ant-tabs-tab",
        scroll: true,
        bubbleScroll: true,
    })
})

function getComponent(key) {
    let keyTmp = key?.split("_#_")?.[0]
    return state.component_map[keyTmp]
}
</script>
<template>
    <a-config-provider
        :locale="zhCN"
        :theme="{
            token: mapToken,
        }"
    >
        <a-style-provider>
            <a-tabs
                v-model:activeKey="globalVars.activeKey"
                type="editable-card"
                hide-add
                size="small"
                tabPosition="top"
                :centered="false"
                class="alltabs"
                :tabBarGutter="0"
                @change="globalVars.changePane"
                @edit="globalVars.removePane"
            >
                <a-tab-pane
                    :tab="element.title"
                    v-for="element in globalVars.panes"
                    :key="element.key"
                    :closable="element.closable"
                >
                    <component :is="getComponent(element.key)" :data="element.data" class="omenu" />
                </a-tab-pane>
                ></a-tabs
            >
        </a-style-provider>
    </a-config-provider>
</template>
<style scoped>
:where(.menu) {
    width: 80px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: var(--page-bg-color) !important;
    color: #fff;
    overflow-y: auto;
    padding: 0px;
    box-shadow: 1px 0 1px var(--Neutral-10) !important;
    /* 无法被选中的样式 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
:where(.omenu) {
    width: 100vw !important;
    height: calc(100vh - 36px) !important;
    overflow-y: auto !important;
    color: var(--character-85);
}
:where(.img0) {
    width: 60px;
    height: 60px;
    margin: 20px 10px;
    margin-bottom: 40px;
}
.alltabs {
    position: fixed;
    top: 0;
    left: 0px;
    right: 0;
}
</style>
<style>
.menu .i-icon {
    display: block !important;
}
.menu .ant-menu-submenu-selected .ant-menu-submenu-title {
    background-color: var(--Primary-6) !important;
}
.alltabs .ant-tabs-nav-wrap .ant-tabs-nav-list {
    cursor: move;
}
</style>
